<template>
  <div>
    <Table :loading="loading" :columns="columns" :data="listData">
      <template slot-scope="{ row }" slot="check">
        <div v-if="row.ischeck">是</div>
        <div v-else>否</div>
      </template>
      <template slot-scope="{ row }" slot="supportDevice">
        <div v-if="row.equip">
            <span v-for="(item,index) in row.equip" :key="item.device_id">
             {{ item.device_name }}
              <span v-if="index<(row.equip.length-1)">,</span>
           </span>
        </div>
        <div v-else>#</div>
      </template>
      <template slot-scope="{ row,index }" slot="roomState">
        <i-switch size="large" v-model="listData[index].state" @on-change="changeState(index)">
          <span slot="open">启用</span>
          <span slot="close">停用</span>
        </i-switch>
      </template>
      <template slot-scope="{ row }" slot="useRoomState">
          <Tag v-if="row.isUse" color="success">开会中</Tag>
          <Tag v-else color="default">空闲中</Tag>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="edit(index)">编辑</Button>
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>

    <Modal
      v-model="isEdit"
      title="编辑会议室"
      :footer-hide="true"
      :width="60"
      @on-cancel="onCancel"
      :styles="{top: '0'}"
    >
      <edit-frm ref="editForm" :editRoom="editRoom" @edit-sumit="editSumbit"></edit-frm>
    </Modal>
  </div>
</template>

<script>
import { setRoomState, delRoom, editRoom } from '@/api/meet'
import editFrm from './editFrm.vue'
export default {
  name: 'deviceList',
  components: {
    editFrm
  },
  props: {
    pageNum: Number,
    loading: Boolean,
    listData: Array
  },
  data () {
    return {
      isEdit: false,
      editSuccess: true,
      editRoom: {},
      columns: [
        {
          title: '编号',
          key: 'id',
          align: 'center'
        },
        {
          title: '会议室名称',
          align: 'center',
          key: 'name'
        },
        {
          title: '容量(人)',
          align: 'center',
          key: 'capacity'
        },
        {
          title: '支持设备',
          align: 'center',
          slot: 'supportDevice'
        },
        {
          title: '预约审核',
          align: 'center',
          slot: 'check'
        },
        {
          title: '会议室地址',
          align: 'center',
          key: 'address'
        },
        {
          title: '创建时间',
          align: 'center',
          key: 'create_time'
        },
        {
          title: '使用状态',
          align: 'center',
          slot: 'useRoomState'
        },
        {
          title: '状态',
          align: 'center',
          slot: 'roomState'
        },
        {
          title: '操作',
          align: 'center',
          slot: 'action'
        }
      ]
    }
  },
  methods: {
    changeState (index) {
      const id = this.listData[index].id
      const team_id = this.listData[index].team_id
      const setAction = this.listData[index].state === true ? 'start' : 'stop'
      setRoomState({ id, setAction, team_id })
        .then(res => {
          // console.log(JSON.stringify(res))
          const data = res.data
          if (data.code === 200) {
            this.listData[index].state = data.data.state
            this.$Message.success(data.message)
          } else {
            this.$Message.error(data.error)
          }
        })
        .catch(err => {
          console.log(err)
          this.$Message.error('操作失败')
        })
    },
    edit (index) {
      this.editRoom = this.listData[index]
      this.editRoom.isFirst = true
      this.isEdit = true
    },
    remove (index) {
      const id = this.listData[index].id
      const team_id = this.listData[index].team_id
      delRoom({ id, team_id })
        .then(res => {
          const data = res.data
          if (data.code === 200) {
            this.listData.splice(index, 1)
            this.$Message.success(res.data.message)
          } else {
            this.$Message.error(data.error)
          }
        })
        .catch(err => {
          console.log(err)
          this.$Message.error('操作失败')
        })
    },
    editSumbit (formData) {
      editRoom(formData)
        .then(res => {
          const data = res.data
          if (data.code === 200) {
            this.$Message.success(data.message)
            this.$refs.editForm.success() // 编辑成功
            this.isEdit = false
            this.editRoom = {}
            this.$emit('edit-call')
          } else {
            this.$refs.editForm.fail()
            this.$Message.error(data.error)
          }
        })
        .catch(err => {
          console.log(err)
          this.$refs.editForm.fail()
          this.$Message.error('编辑失败')
        })
    },
    onCancel () {
      this.$emit('edit-call')
    }
  }
}
</script>

<style lang="" scoped>
</style>
